import React, { useEffect, useRef } from 'react';

const Watermark = ({ text, show }) => {
    const watermarkRef = useRef(null);

    useEffect(() => {
        const watermark = watermarkRef.current;
        if (show) {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 200;
            canvas.height = 100;

            ctx.font = '20px Arial';
            ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
            ctx.rotate(-20 * Math.PI / 180);
            ctx.fillText(text, 20, 80);

            const base64Url = canvas.toDataURL();
            watermark.style.backgroundImage = `url(${base64Url})`;
            watermark.style.pointerEvents = 'none';
        } else {
            watermark.style.backgroundImage = 'none';
        }
    }, [show, text]);

    return (
        <div
            ref={watermarkRef}
            style={{
                position: 'fixed',
                top: 0,
                left: 0,
                width: '100%',
                height: '100%',
                marginTop: '20px',
                marginLeft: 'calc(40% - 50px)',
                zIndex: 9999,
            }}
        />
    );
};

export default Watermark;